<!--  -->
<template>
  <div class="upload-img">
    <div class="img" v-for="(item,index) in imgList" :key="index">
      <image :src='item' mode='aspectFix'></image>
      <i :class="['iconfont pdxcha',iconStyle!='icon02'?'icon01':'icon02']" @click="del(index)"></i>
    </div>
    <div class="img" @click="upload"><image :src='uploadImg' mode='aspectFix'></image></div>
  </div>
</template>

<script>
export default {
  name:'upload-img',
  props:{
    uploadImg:{
      type:String,
      default:''
    },
    imgList:{
      type:Array,
      default:()=>[]
    },
    iconStyle:{
      type:String,
      default:"icon01"
    }
  },
  data () {
    return {
      
    };
  },

  components: {},

  computed: {},

  mounted(){
    console.log(this.uploadImg);
    console.log(this.imgList);
  },

  methods: {
    del(i){
      this.$emit('del',i)
    },
    upload(){
      this.uploadFile((path) => {
        this.$emit('upload',path)
      })
      
    }
  }
}

</script>
<style lang='scss' scoped>
 .upload-img{
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .img{
      margin:10rpx calc((100% - 552rpx)/8);
      width: 138rpx;
      height: 138rpx;
      border-radius: 2px;
      position: relative;
      image{
        width: 100%;
        height: 100%;
      }
      i{
        position: absolute;
        top:0rpx;
        right: 0rpx;
      }
       .icon01{
        top:-8rpx;
        right: -8rpx;
        width: 30rpx;
        height: 30rpx;
        font-size:20rpx;
        line-height: 30rpx;
        text-align: center;
        color: #fff;
        background: #333;
        border-radius: 50%;
      }
      .icon02{
        display: block;
        width: 30rpx;
        height: 30rpx;
        line-height: 30rpx;
        text-align: center;
        color: #fff;
        background: #aaa;
        border-top-right-radius: 2px;
        overflow: hidden;
      }
    }
  }
</style>